<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../utils/vue.min.js"></script>

		<style>
			.bottom{
				display: flex;
				flex-direction: row;
				/* justify-content: center; */
				/* justify-items: center; */
			}
			
			p{
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="app" style="width: 300px; background-color: cornsilk;text-align: center;">
			<h3>双双记事本</h3>
			<input placeholder="请输入任务:" v-model="input" @keyup.enter="addItem(input)" />
			<div>
				<p v-for="(item, index) in list">{{index+1}}. {{item}}
					<img src="../images/celamoon.png" style="width: 20px;" @click="delItem(index )" />
				</p>

			</div>
			<div class="bottom">
				<p>{{list.length}} items left</p>
				<p @click="clearItem()">Clear</p>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				list: ["吃饭饭", "睡觉觉", "学习习"],
				input: ""
			},
			methods: {
				addItem: function(item) {
					if (this.input != '') {
						this.list.push(item);
					} else{
						alert("请输入任务内容！");
					}
					this.input = '';
				},
				delItem: function(index) {
					// 和下面代码等价
					this.list.splice(index, 1);
					// 	while(index < this.list.length-1){
					// 		this.list[index] = this.list[index+1]; 
					// 		index++;
					// 	}
					// 	this.list.pop(index+1);

				},
				clearItem: function() {
					this.list = [];
				}
			}
		})
	</script>
</html>
